Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Respect "prefers-color-scheme" media selector for guests #21366

Merged
merged 1 commit into from
Jun 22, 2020

Conversation

nickvergessen
Copy link
Member

@nickvergessen nickvergessen commented Jun 10, 2020

Guests now automatically see dark theme when the browser tells the website it prefers a dark style:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

A similar setting for contrast high seems to be in development but is not supported:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

See https://stackoverflow.com/a/56757527 for helps how to test this quickly

Edit by @georgehrke:
fixes #12276

@nickvergessen
Copy link
Member Author

cc @nextcloud/accessibility

@nickvergessen
Copy link
Member Author

cc @nextcloud/theming

Copy link
Member

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, this is pretty amazing! :) Great integration and works well when tested with the link sharing pages of Forms, Talk, and Files.

@georgehrke
Copy link
Member

Where does the actual @media (prefers-color-scheme: dark) { come from though?

@nickvergessen
Copy link
Member Author

Its on the link meta tag, that is the only why you can set global css vars within a condition

@juliusknorr
Copy link
Member

Does not fully fix #12276 as it is only for unauthorized access though public pages, but a good first step 👍

@nickvergessen
Copy link
Member Author

Yeah, we can show a not about the personal setting based on the selector in the future, but first guests only.

@nickvergessen nickvergessen merged commit 64f5a20 into master Jun 22, 2020
@nickvergessen nickvergessen deleted the feature/noid/respect-prefers-color-scheme branch June 22, 2020 13:56
@Moini
Copy link

Moini commented Jan 5, 2021

How can I turn this off? For some reason, nextcloud switched to dark mode today after I logged in, and I really dislike it. The dashboard is unreadable and everything looks unsharp to my eyes. I need dark on white text, which is available, but not accessible to me, apparently.

@Moini
Copy link

Moini commented Jan 5, 2021

Update: another logout - login cycle fixed it...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Adapt dark mode based on system settings
5 participants